<template>
	<view class="login-container">
		<view class="login-header">
			<text class="login-title">个人记账</text>
			<text class="login-subtitle">记录每一笔收支</text>
		</view>

		<view class="login-form">
			<view class="input-group">
				<input v-model="form.username" class="input-field" type="text" placeholder="请输入用户名" maxlength="20" />
			</view>

			<view class="input-group">
				<input v-model="form.password" class="input-field" :type="showPassword ? 'text' : 'password'"
					placeholder="请输入密码" maxlength="20" @confirm="handleLogin" />
				<text class="password-toggle" @click="showPassword = !showPassword">
					{{ showPassword ? '隐藏' : '显示' }}
				</text>
			</view>

			<button class="login-btn" :disabled="loading" @click="handleLogin">
				<text v-if="loading" class="btn-loading">登录中...</text>
				<text v-else>登录</text>
			</button>

			<view class="login-links">
				<text class="link-text" @click="navigateToRegister">没有账号？立即注册</text>
			</view>
		</view>
	</view>
</template>

<script>
	import storage from '@/utils/storage.js';

	export default {
		data() {
			return {
				form: {
					username: '',
					password: '',
					status: '0'
				},
				showPassword: false,
				loading: false
			};
		},

		onLoad() {
			// 检查是否已登录
			const token = storage.getAccessToken();
			if (token) {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		},

		methods: {
			async handleLogin() {
				// 表单验证
				if (!this.form.username.trim()) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
					return;
				}

				if (!this.form.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}

				this.loading = true;

				try {
					await this.$store.dispatch('login', this.form);

					uni.showToast({
						title: '登录成功',
						icon: 'success'
					});

					// 登录成功后跳转到首页
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}, 1500);

				} catch (error) {
					uni.showToast({
						title: error.message || '登录失败',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},

			navigateToRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				});
			}
		}
	};
</script>

<style scoped>
	.login-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 60rpx;
	}

	.login-header {
		text-align: center;
		margin-bottom: 80rpx;
	}

	.login-title {
		display: block;
		font-size: 48rpx;
		font-weight: bold;
		color: white;
		margin-bottom: 20rpx;
	}

	.login-subtitle {
		display: block;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.login-form {
		background: white;
		border-radius: 20rpx;
		padding: 60rpx 40rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
	}

	.input-group {
		position: relative;
		margin-bottom: 40rpx;
	}

	.input-field {
		width: 100%;
		height: 100rpx;
		border: 2rpx solid #E5E5EA;
		border-radius: 12rpx;
		padding: 0 30rpx;
		font-size: 32rpx;
		background-color: #F8F8F8;
	}

	.input-field:focus {
		border-color: #007AFF;
		background-color: white;
	}

	.password-toggle {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		color: #007AFF;
		font-size: 28rpx;
	}

	.login-btn {
		width: 100%;
		height: 100rpx;
		background: linear-gradient(135deg, #007AFF, #0056CC);
		color: white;
		border: none;
		border-radius: 12rpx;
		font-size: 36rpx;
		font-weight: bold;
		margin-top: 20rpx;
	}

	.login-btn:disabled {
		background: #CCCCCC;
	}

	.btn-loading {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.login-links {
		margin-top: 40rpx;
		text-align: center;
	}

	.link-text {
		color: #007AFF;
		font-size: 28rpx;
	}
</style>